<script setup>
import qrCode from "../assets/refill/qrcode.png";
import copy from "../assets/refill/copy.png";
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { http } from "../services/service";
import { useUserStore } from "../store/index";
import i18n from "../i18n/lang";
import { useI18n } from "vue-i18n";

const i18nUse = useI18n();
const router = useRouter();
const route = useRoute();
const store = useUserStore();

const withdrawAddress = ref("");
const comment = ref("");
const withdrawAmount = ref("");
const tons = ref("");
const back = () => {
  router.go(-1);
};
const getTon = () => {
  http
    .get(
      `/api/v1/center/withdrawCalculate?withdrawAmount=${withdrawAmount.value}`
    )
    .then(
      (response) => {
        console.log(response);
        tons.value = response.data.data.witTon;
      },
      () => {}
    );
};
const btnDisabled = ref(false);
const show = ref(false);
const withDraw = () => {
  show.value = true;
};
const confirmWithDraw = () => {
  http
    .get(
      `/api/v1/center/withdraw?telegramId=${store.getUser.telegramId}&withdrawAddress=${withdrawAddress.value}&withdrawAmount=${withdrawAmount.value}
      &comment=${comment.value}&payPass=${password.value}`
    )
    .then(
      (response) => {
        if (response.data.code === 200) {
          showToast(i18nUse.t("widthDraw_success"));
          router.push("/assets");
          btnDisabled.value = true;
        } else {
          showToast(response.data.message);
          btnDisabled.value = false;
        }
      },
      () => {}
    );
};
const password = ref("");
</script>

<template>
  <van-dialog
    v-model:show="show"
    show-cancel-button
    :confirm-button-text="$t('confirm')"
    :cancel-button-text="$t('cancel')"
    cancel-button-color="#95979E"
    :confirmButtonDisabled="password.length < 6"
    @confirm="confirmWithDraw"
  >
    <div class="container-input">
      <van-field
        v-model="password"
        type="password"
        :maxlength="6"
        :label="$t('trade_password')"
        
        :placeholder="$t('type_password')"
      />
    </div>
  </van-dialog>
  <div class="container">
    <div class="title">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="25"
        @click="back()"
      />{{ $t("withdraw") }}
    </div>
    <div class="withDraw">
      <van-field
        v-model="withdrawAddress"
        label-width="150px"
        :label="$t('withDrawAddress')"
        :placeholder="$t('withDrawAddressEnter')"
      />
      <van-field v-model="comment" label="Comment" label-width="150px" />
      <van-field
        v-model="withdrawAmount"
        label-width="150px"
        type="number"
        :label="$t('withDrawStar')"
        @blur="getTon()"
        :placeholder="$t('withDrawStarEnter')"
      />
      <van-field
        v-model="tons"
        label-width="150px"
        :label="$t('withDrawTon')"
        :disabled="true"
      />
    </div>

    <div class="text-container">{{ $t("widthDrawDes") }}:</div>
    <div class="text-container" v-html="$t('widthDrawTxt')"></div>
    <div class="confirm">
      <van-button
        type="primary"
        block
        :disabled="
          !withdrawAddress || !comment || !withdrawAmount || btnDisabled
        "
        @click="withDraw()"
        >{{ $t("confirm") }}</van-button
      >
    </div>
  </div>
</template>

<style scoped lang="less">
.confirm {
  width: 70%;
  margin: 20px auto;

  button {
    background-image: linear-gradient(to right, #9ba8ff, #4a61f9);
    border-radius: 10px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}
.container-input {
  padding: 20px;
  .van-cell {
    background-color: unset !important;
    color: #fff !important;

    .van-cell__title {
      color: #fff !important;
    }
  }

  .van-cell__title {
    color: #fff !important;
  }
}
.title {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 8px;
    cursor: pointer;
  }

  font-size: 17px;
  text-align: center;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

.qr-code {
  width: 158px;
  height: 158px;
  margin: 54px auto 0 auto;
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-container {
  font-size: 12px;
  width: 310px;
  margin: 20px auto 0 auto;
  color: #d8d8d8;
  line-height: 20px;
}

.withDraw {
  width: 311px;
  margin: 40px auto 0 auto;
  background: rgba(44, 47, 61, 0.7);
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  min-height: 40px;

  .van-cell {
    background-color: unset !important;
    color: #fff !important;

    .van-cell__title {
      color: #fff !important;
    }
  }

  .van-cell__title {
    color: #fff !important;
  }
}
</style>
